<template>
  <div
    style="background-color: #fafafa; position: relative; margin-top: -10px"
    v-loading="loading"
  >
    <div
      flex="main:justify"
      style="height: 45px; margin-right: 5px; line-height: 45px"
    >
      <div style="margin: 7px 0 0 24px">
        <div v-if="queryId">
          <el-button
            type="primary"
            :class="getIcon(leftButton)"
            class="iconfont"
            size="small"
          >
            <span> {{ leftButton }} </span>
          </el-button>
        </div>
      </div>
      <div class="rightButton">
        <el-button
          type="primary"
          size="small"
          @click="newlyIncreased"
          style="padding: 9px 10px"
        >
          <i class="el-icon-plus mr"></i>新增</el-button
        >
        <el-button
          type="primary"
          size="small"
          @click="revise"
          style="padding: 9px 10px"
          v-if="showButton == '1'"
        >
          <i class="el-icon-edit mr"></i>修改</el-button
        >
        <el-button
          type="danger"
          size="small"
          @click="cutOut"
          style="padding: 9px 10px"
          v-if="showButton == '1'"
        >
          <i class="el-icon-delete mr"></i>删除
        </el-button>
        <el-button
          type="primary"
          size="small"
          @click="submitTo"
          style="padding: 9px 10px"
          v-if="showButton == '1'"
        >
          <i class="el-icon-position mr"></i>提交
        </el-button>
        <el-button
          type="primary"
          size="small"
          @click="process"
          style="padding: 9px 10px"
          v-if="showButton == '2'"
        >
          <i class="el-icon-coordinate mr"></i>审核</el-button
        >
        <!-- <el-button
          type="primary"
          size="small"
          @click="stamp"
          style="padding: 9px 10px"
          v-if="showButton == '3'"
          >打印</el-button
        > -->
        <el-button
          type="primary"
          size="small"
          @click="firstPage"
          style="padding: 9px 10px"
        >
          <i class="mr"></i>首条</el-button
        >
        <el-button
          type="primary"
          size="small"
          icon="el-icon-arrow-left"
          style="margin-right: 10px"
          @click="previousPage"
        ></el-button>
        {{ currentPage }} / {{ pageCount }}
        <el-button
          type="primary"
          size="small"
          icon="el-icon-arrow-right"
          @click="nextPage"
        ></el-button>
        <el-button type="primary" size="small" @click="Last">末条</el-button>
      </div>
    </div>
    <div style="display: flex; margin: 10px 0; height: 100%">
      <div style="overflow-y: auto; width: 100%">
        <el-collapse
          v-model="activeNames"
          @change="handleChange(activeNames, 1)"
          class="box"
        >
          <el-collapse-item name="1" style="margin: 0 10px">
            <template slot="title">
              <div class="title_box" flex="cross:center main:justify">
                <span class="title">线索信息</span>
                <span class="operate">{{ arr1 == -1 ? "展开" : "收起" }}</span>
              </div>
            </template>
            <look-form
              ref="customForm1"
              :formRow="topFormRow"
              :spanNumber="spanNumber"
              :ruleForm="topRuleForm"
              style="padding: 10px 0"
            >

            </look-form>
          </el-collapse-item>
          <el-collapse-item name="2" style="margin: 0 10px">
            <template slot="title">
              <div class="title_box" flex="cross:center main:justify">
                <span class="title"
                  >相关联系人({{ stageTableData.length }})</span
                >
                <span class="operate">{{ arr2 == -1 ? "展开" : "收起" }}</span>
              </div>
            </template>
            <div style="padding: 0 10px">
              <div
                v-if="stageTableData.length == '0'"
                style="text-align: center"
              >
                暂无明细
              </div>
              <base-table
                v-else
                ref="customtable"
                :border="true"
                :showIndex="true"
                :tabLoading.sync="tabLoading"
                :tableData="stageTableData"
                align="center"
                :tableColumn="contractPhase"
                class="table"
              >
                <template v-slot:supportTime="{ row }">
                  <span>{{ formatTime(row.supportTime) }}</span>
                </template>
              </base-table>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <contract-assistant
        ref="contractAssistant"
        :billID="queryId"
        :billStateName="billStateName"
      ></contract-assistant>
      <audit-note
        ref="auditNote"
        :billID="billID"
        :billKindID="billKindID"
        :billStateName="billStateName"
      ></audit-note>
    </div>
    <base-drag-ball
      @handlepaly="openAssistant"
      style="cursor: pointer; z-index: 10000"
    ></base-drag-ball>
  </div>
</template>

<script>
import configData from "./configData";
import baseDragBall from "@/components/base/baseDragBall";
import contractAssistant from "./contractAssistant.vue";
import auditNote from "./auditNote.vue";
import { submitAudit } from "@/api/apis/audit";
import { GetBillData, GetBillList,DelData } from "@/api/apis/preSalesSupport";
import lookForm from "@/components/base/baselookForm/index.vue";
import baseTable from "@/components/base/baseTable";
import baseDialog from "@/components/base/BaseNewDialog/index.vue";
export default {
  name: "ViewPresales",
  components: {
    lookForm,
    baseTable,
    baseDialog,
    contractAssistant,
    auditNote,
    baseDragBall,
  },
  data() {
    return {
      queryId: "",
      billID: "",
      billKindID: "180",
      billStateName: "",
      auditNote: [],
      loading: false,
      leftButton: '',
      showButton: "",
      currentPage: "",
      pageCount: "",
      activeNames: ["1"],
      arr1: "",
      arr2: "-1",
      contractDetails: configData.contractDetails,
      topFormRow: configData.topFormRow,
      topRuleForm: {},
      spanNumber: 6,
      stageTableData: [], //configData.stageTableData,	//合同阶段表体内容,
      appendix: [],
      appendixList: [],
      springFrame: false,
      informationContent: {},
      tableData: [],
      tableColumn: [],
      attachmentDetails: [],
      arr6: "-1",
      total1: false,
      total2: false,
      detailedIndex: [10],
      stageIndex: [7],
      list: {},
      tabLoading: false,
      contractPhase: [
				{
					label: '支持人员',
					prop: 'supportPersonName',
					tooltip: true,
				},
				{
					label: '部门',
					prop: 'supportDepName',
					tooltip: true,
				},
				{
					label: '时间',
					prop: 'supportTime',
					tooltip: true,
				},
				{
					label: '联系方式',
					prop: 'tel',
					tooltip: true,
				},
				{
					label: '支持内容',
					prop: 'supportContent',
					tooltip: true,
					width: '600'
				},
				{
					label: "操作",
					prop: "operate",
					width: "70",
				},
      ],
      firstOpen: true,
      refresh: true,
    };
  },
  activated() {
    if (this.$route.query.Refresh == "true") {
      this.refresh = true;
    }
    if (this.firstOpen == false && this.refresh == true) {
      this.$tab.refreshPage(this.$route);
    }
    this.firstOpen = false;
    this.$route.query.Refresh = false;
  },
  watch: {
    billID: {
      handler(val) {
        this.billID = val;
      },
      deep: true,
    },
  },
  created() {
    this.init()
    this.refresh = false;
    this.$route.query.Refresh = false;
  },
  methods: {
    openAssistant() {
      this.$refs.contractAssistant.open();
      this.$refs.auditNote.close();
    },
    getIcon(val) {
      if (val.contractBillState == "终止") {
        return "icon-zhongzhi";
      } else if (val.contractBillState == "未提交") {
        return "icon-weitijiao";
      } else if (val.contractBillState == "审核中") {
        return "icon-shenhezhong";
      } else if (val.contractBillState == "完成") {
        return "icon-shenhetongguo";
      } else if (val.invBillState == "未开票") {
        return "icon-a-9weikaipiaochuli";
      }
    },
    init() {
      this.queryId = this.$route.query.id;
      this.billID = this.billID ? this.billID : this.queryId;
      if (this.queryId) {
        this.details();
      } else {
        this.getContractList();
      }
    },
    async details() {
      this.loading = true;
      if (this.queryId) {
        const res = await GetBillData({
          id: this.queryId,
          op: "",
        });
        this.assignment(res);
        this.getContractList();
      }
      this.openInit();
    },
    openInit() {
      if (this.billStateName != "审核中") {
        this.$refs.auditNote.close();
      } else {
        this.process();
      }
    },
    async getContractList() {
      this.list = await GetBillList({
        page: 1,
        limit: 999,
        sequence: "",
        SequenceName: "",
        CodeOrName: "",
        ConType: "",
      });
      if (this.list.code == 1) {
        this.pageCount = this.list.data[0];
        this.currentPage = this.list.data[1].findIndex((item) => {
          return item.billid == this.queryId;
        });
        this.currentPage++;
        if (this.currentPage == "0") {
          this.nextPage();
        }
        this.loading = false;
      }
    },
    judgeOn(data, Refresh, id) {
      let el = this.$store.state.tagsView.visitedViews.filter((el) => {
        return el.path == "/marketing/leadManagement/newLead";
      });
      if (el.length > 0) {
        this.$confirm(
          "当前页面已打开，继续打开页面原页面数据将被清除，是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            this.$router.push({
              path: "newPresales",
              query: {
                name: data,
                id: id,
                Refresh,
              },
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消操作",
            });
          });
      } else {
        this.$router.push({
          path: "newPresales",
          query: {
            name: data,
            id: id,
            Refresh: Refresh,
          },
        });
      }
    },
    newlyIncreased() {
      this.judgeOn("新增售前支持", true);
    },
    revise() {
      this.judgeOn(
        "编辑售前支持",
        true,
        this.list.data[1][this.currentPage - 1].billid
      );
    },
    cutOut() {
      this.$confirm("确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.delData(this.list.data[1][this.currentPage - 1].billid);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    //审核
    process() {
      this.$refs.auditNote.open();
      this.$refs.auditNote.init();
      this.$refs.contractAssistant.close();
    },
    stamp() {},

    async delData(id) {
      const res = await DelData({
        id,
      });
      if (res.success == "true") {
        this.$message({
          message: "删除成功",
          type: "success",
        });
        this.init();
      }
    },
    // 第一页
    async firstPage() {
      this.billID = this.list.data[1][0].billid;
      if (this.currentPage == 0) {
        this.$message({
          showClose: true,
          message: "已经是最早一页了！",
          type: "warning",
        });
        return;
      }
      if (this.currentPage == 1) {
        this.$message({
          showClose: true,
          message: "已经是最早一页了！",
          type: "warning",
        });
      } else {
        this.loading = true;
        const res = await GetBillData({
          id: this.list.data[1][0].billid,
          op: "show",
        });
        if (res.code == 1) {
          this.currentPage = 1;
          this.assignment(res);
          this.openInit();
        }
        this.loading = false;
      }
    },
    // 上一页
    async previousPage() {
      if (this.currentPage == 0) {
        this.$message({
          showClose: true,
          message: "已经是最早一页了！",
          type: "warning",
        });
        return;
      }
      if (this.currentPage == 1) {
        this.$message({
          showClose: true,
          message: "已经是最早一页了！",
          type: "warning",
        });
      } else {
        this.loading = true;
        const res = await GetBillData({
          id: this.list.data[1][this.currentPage - 2].billid,
          op: "show",
        });
        if (res.code == 1) {
          this.currentPage--;
          this.assignment(res);
          this.openInit();
        }
        this.loading = false;
      }
    },
    // 下一页
    async nextPage() {
      this.billID = this.list.data[1][this.currentPage].billid;
      if (this.currentPage == this.pageCount) {
        this.$message({
          showClose: true,
          message: "已经是最后一页了！",
          type: "warning",
        });
      } else {
        this.loading = true;
        const res = await GetBillData({
          id: this.list.data[1][this.currentPage].billid,
          op: "show",
        });

        if (res.code == 1) {
          this.currentPage++;
          this.assignment(res);
          this.openInit();
        }
        this.loading = false;
      }
    },
    // 最后一页
    async Last() {
      this.billID = this.list.data[1][this.pageCount - 1].billid;
      if (this.currentPage == this.pageCount) {
        this.$message({
          showClose: true,
          message: "已经是最后一页了！",
          type: "warning",
        });
      } else {
        this.loading = true;
        const res = await GetBillData({
          id: this.list.data[1][this.pageCount - 1].billid,
          op: "show",
        });
        if (res.code == 1) {
          this.currentPage = this.pageCount;
          this.assignment(res);
          this.openInit();
        }
        this.loading = false;
      }
      if (this.currentPage == 0) {
        this.loading = true;
        const res = await GetBillData({
          id: this.list.data[1][this.list.data[1].length].billid,
          op: "show",
        });
        if (res.code == 1) {
          this.currentPage++;
          this.assignment(res);
          this.openInit();
        }
        this.loading = false;
      }
    },
    handleChange(val, index) {
      this.arr1 = val.indexOf("1");
      this.arr2 = val.indexOf("2");
    },
    assignment(res) {
      res.data[0].applySupportTime = this.formatTime(res.data[0].applySupportTime)
      res.data[0].realSupportTime = this.formatTime(res.data[0].realSupportTime)
      if (res.data[0].important == '0') {
        res.data[0].important = '低'
      } else if(res.data[0].important == '1') {
        res.data[0].important = '普通'
      } else if(res.data[0].important == '2') {
        res.data[0].important = '高'
      }
      this.stageTableData = res.data[1];
      this.topRuleForm = res.data[0]
      this.leftButton = res.data[0].billStateName;
      // this.billStateName = this.leftButton.contractBillState;
      if (res.data[0].billStateName == "未提交") {
        this.showButton = "1";
      } else if (res.data[0].billStateName == "审核中") {
        this.showButton = "2";
      } else if (res.data[0].billStateName == "审核完成") {
        this.showButton = "3";
      } else {
        this.showButton = "";
      }
    },
    formatTime(row) {
      return row && row.substring(0, 10);
    },
    async submitTo() {
      const res = await submitAudit({
        billID: this.list.data[1][this.currentPage - 1].billid,
        wfID: "2",
        billKindID: this.billKindID,
      });
      if (res.success == "true") {
        this.$message({
          message: "提交审核成功",
          type: "success",
        });
      }
      this.init();
    },
  },
};
</script>

<style scoped lang="scss">
.iconfont {
  font-size: 12px !important;
}

.box {
  width: 100%;
  background-color: #fafafa;
  border-radius: 5px;
  margin-bottom: 20px;

  .title {
    font-size: 16px;
    color: #000;
    border-left: 3px solid #2261f6;
    padding-left: 8px;
    text-align: left;
  }

  .title_box {
    width: 100%;
    border-bottom: 1px solid #fafafa;
    padding-bottom: 10px;

    .operate {
      color: #409eff;
    }
  }

  ::v-deep .el-collapse-item {
    border-bottom: 10px solid #fafafa;
  }

  ::v-deep .el-collapse-item__header {
    height: auto;
    line-height: normal;
    padding: 15px 10px;
    border-bottom: none;
  }

  ::v-deep .el-collapse-item__arrow {
    margin-bottom: 8px;
    color: #409eff;
  }
}

>>> .el-form--label-top .el-form-item__label {
  padding: 0 !important;
}

.agreement {
  ::v-deep .el-row {
    display: flex;
  }

  ::v-deep .el-col-6 {
    flex: 1;
    padding: 0;
  }

  ::v-deep .el-form-item__content {
    width: 70px;

    p {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

.contract {
  display: flex;
  flex-wrap: wrap;

  ::v-deep .el-row {
    display: flex;
  }

  ::v-deep .el-col-6 {
    flex: 1;
    padding: 0;
  }

  ::v-deep .el-form-item__content {
    width: 70px;

    p {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  ::v-deep .el-row:nth-child(2) {
    p {
      height: 50px;
    }
  }
}

.rightButton {
  margin-top: 7px;

  ::v-deep .el-button--primary {
    padding: 9px 10px;
    margin-left: 8px;
  }

  ::v-deep .el-button--primary:last-child {
    padding: 9px 10px;
    margin-left: 8px;
    margin-right: 20px;
  }

  .mr {
    padding-right: 5px;
  }
}

::v-deep .el-loading-mask {
  z-index: 999;
}

.tableButton {
  color: #409eff;
  cursor: pointer;
}

.tableButton + .tableButton {
  // color: #409eff;
  margin-left: 5px;
}

::v-deep .el-collapse {
  flex: 1;
}
</style>
